<template>
  <view class="panel-box">
    <view class="top-content">
      <view class="info-box">
        <view class="title-box">
          <view class="title">{{ showData.title }}</view>
          <view class="price-box">
            <text class="price-des">新人</text>
            <text class="rmb">¥</text>
            <text class="price">{{ showData.price }}</text>
            <text class="price-des">起</text>
          </view>
        </view>
        <view class="location">{{ showData.location }}</view>
        <view class="tags">
          <view
            class="tags-item"
            :class="item.type"
            v-for="(item, index) in showData.tags"
            :key="index"
            >{{ item.name }}</view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  name: "list001",
  props: {
    showData: {
      type: Object,
      default: () => {
        return {
          id: 11,
          title: "北京·柯南·永远的一瞬主题快闪 官方限定特典礼包",
          artist: "展览休闲",
          location: "北京 | 西单大悦城1F东大堂",
          date: "2025.09.12-10.19",
          price: "139",
          status: "售票中",
          imageUrl: "/static/dataImage/damai/011.webp",
          tags: [
            {
              name: "特惠·最高减8.1元",
              type: "type1",
            },
            {
              name: "影城卡",
              type: "type1",
            },
            {
              name: "退票",
              type: "type2",
            },
            {
              name: "VIP厅",
              type: "type3",
            },
            {
              name: "观影小吃",
              type: "type3",
            },
            {
              name: "4DX厅",
              type: "type3",
            },
          ],
        };
      },
    },
  },
  components: {},
  setup(props) {
    const data = reactive({});
    return {
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.panel-box {
  position: relative;
  background: #fff;
  border-radius: 15rpx;
  overflow: hidden;
  padding: 20rpx;
  .top-content {
    display: flex;
    .info-box {
      padding: 0 20rpx;
      flex: 1;
      .artist {
        font-size: 24rpx;
        color: #ff7300;
        margin-bottom: 10rpx;
      }
      .title-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title {
          flex: 1;
          font-size: 28rpx;
          color: #000;
          // 显示2行多余省略号
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
          font-weight: 400;
          line-height: 40rpx;
        }
        .price-box {
          max-width: 400rpx;
          text-align: right;
          .rmb {
            font-size: 20rpx;
            font-weight: 700;
            margin-right: 5rpx;
          }
          .price {
            font-size: 30rpx;
            font-weight: 700;
          }
          .price-des {
            font-weight: 300;
            font-size: 20rpx;
            margin-left: 5rpx;
          }
        }
      }

      .location {
        font-size: 22rpx;
        color: #777;
      }
      .tags {
        display: flex;
        // 换行
        flex-wrap: wrap;
        width: 80%;
        .tags-item {
          font-size: 18rpx;
          border: 1rpx solid #ccc;
          padding: 1rpx 8rpx;
          border-radius: 6rpx;
          margin-right: 10rpx;
          margin-top: 10rpx;
          font-weight: 400;
          &.type1 {
            color: #ff7300;
            border-color: #ffc99e;
          }
          &.type2 {
            color: #0077ff;
            border-color: #a4d6ff;
          }
          &.type3 {
            color: #838383;
            border-color: #c2c2c2;
          }
        }
      }
    }
  }
}
</style>
